/*
 * @Author: your name
 * @Date: 2021-04-22 07:11:16
 * @LastEditTime: 2021-04-24 07:26:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \offer20k\项目代码\fantasticit\src\pages\homepage\index.tsx
 */
import React, { useEffect } from "react"
import { observer } from "mobx-react-lite"
import useStore from '@/context/useStore'
import styles from "./index.less"
import styless from "./aside.less"
import { timeAgo } from '@/util/index'
import { Carousel } from 'antd';
import Articlecategory from '@/components/Articlecategory'
import Articletags from '@/components/Articletags'
import Airticlelist from '@/components/Airticlelist'
import { GithubFilled } from '@ant-design/icons'
import Icon from '@ant-design/icons';
import Homelist from "@/components/homelist"
import { useHistory } from "umi"

const HeartSvg = () => (
    <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1188" width="26" height="26"><path d="M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229.2 512-512S794.8 0 512 0zM405.2 704c-14.4 0.1-27.6-8.4-33.1-21.6-2.8-6.7-6.9-12.9-12.2-18.2-5.4-5.3-11.6-9.5-18.4-12.3-13.3-5.5-21.7-18.7-21.7-33 0-25.8 26.4-43.2 50.1-33.1 15.1 6.4 28.9 15.7 40.9 27.6 11.8 11.8 21.1 25.5 27.5 40.5 10.1 23.7-7.1 50.1-32.9 50.2l-0.2-0.1z m170.7 0c-18 0-33.2-13.2-35.7-31-6.7-47.5-28.4-91.4-63-126-34.6-34.6-78.7-56.5-126.4-63.1-17.8-2.5-31-17.7-31-35.6 0-21.8 19.2-38.6 40.8-35.7 63.2 8.7 121.6 37.6 167.6 83.5 45.8 45.8 74.6 104 83.4 167 2.9 21.6-13.9 40.8-35.7 40.9z m166.6-0.2c-18.7 0.1-34.1-14.3-35.7-33-7.7-91.1-46.9-175.7-112.3-241-65.6-65.6-150.4-104.8-241.7-112.4-18.6-1.6-33-17-33-35.6v-0.5c0-20.8 17.7-37.3 38.5-35.6 46.3 3.8 91.5 14.6 134.7 32.1C550.1 301 601.4 335 645.3 378.9c43.9 43.9 77.9 95 101 152 17.6 43.2 28.3 88.2 32.2 134.5 1.7 20.7-14.7 38.5-35.5 38.5l-0.5-0.1z" fill="#96989B" p-id="1189"></path></svg>);

const HeartIcon = (props: any) => <Icon component={HeartSvg} {...props} />;

const homepage: React.FC = () => {
    let { Home } = useStore()
    const history = useHistory()
    const godetail = (id: string) => {
        // history.push('/article/detail'+id)
        history.push(`/article/detail/${id}`, id)
    }
    useEffect(() => {
        Home.gitarticlerecommend()
        Home.gitshow()
        Home.setfooter(false)
    }, [])

    return <div className={styles.homepage} >
        <div className={styles.homepage_left} >
            <div className={styles.show}>
                <Carousel autoplay  >
                    {
                        Home.showlist.map((item, index) => {
                            return <div className={styles.swiperslide} key={index} onClick={() => { godetail(item.id) }}>
                                <img style={{ width: "100%", height: "100%" }} src={item.cover} alt="" />
                                <div className={styles.showitem}>
                                    <h2>{item.title}</h2>
                                    <p>
                                        <span>{timeAgo(+ new Date(item.createAt))}前 · </span>
                                        <span>{item.views}次阅读</span>
                                    </p>

                                </div>
                            </div>
                        })
                    }
                </Carousel>
            </div>
            <Homelist></Homelist>
        </div>
        <div className={styless.aside}>

            {/* 推荐文章 */}
            <Airticlelist />
            <div className={styless.sticky}>
                {/* 文章分类 */}
                <Articlecategory />
                {/* 文章标签 */}
                <Articletags />

                <div className={styles.foter}>
                    <div className={styles.icon}>
                        <HeartIcon style={{ color: 'hotpink', padding: 5 }} />
                        <GithubFilled style={{ fontSize: "26px", padding: 5, }} />
                    </div>
                    <div className={styles.title}>
                        <p>Designed by Fantasticit.后台管理</p>
                        <p>Copyright © 2021. All Rights Reserved.</p>
                        <p>皖ICP备18005737号</p>
                    </div>


                </div>
            </div>
        </div>
    </div >

}
export default observer(homepage);